<template>
  <div class="card-stack">
    <CardItem v-for="(item, index) in pages" :key="index" :item="item" :style="getCardStyle(index)"
      @touchstart="handleTouchStart($event, index)" @touchmove="handleTouchMove($event, index)"
      @touchend="handleTouchEnd($event, index)" @touchcancel="handleTouchEnd($event, index)"
      @mousedown="handleTouchStart($event, index)" @mousemove="handleTouchMove($event, index)"
      @mouseup="handleTouchEnd($event, index)" @mouseout="handleTouchEnd($event, index)"
      @click="emit('click', index)" />
  </div>
</template>
<script setup lang="ts">
import { reactive, computed, nextTick } from 'vue'
import CardItem from './CardItem.vue'
import type { PageItem } from './FlipCard.vue'

const props = defineProps<{
  pages: PageItem[]
}>()

const emit = defineEmits(['click'])

// 状态管理
const state = reactive({
  currentPage: 0,
  tracking: false,
  animation: false,
  startX: 0,
  startY: 0,
  posX: 0,
  posY: 0,
  opacity: 1
})

// 事件处理
const handleTouchStart = (e: MouseEvent | TouchEvent, index: number) => {
  if (state.tracking || index !== state.currentPage) return

  let clientX, clientY
  if (e instanceof TouchEvent) {
    clientX = e.touches[0].clientX
    clientY = e.touches[0].clientY
  } else {
    clientX = e.clientX
    clientY = e.clientY
  }

  state.tracking = true
  state.animation = false
  state.startX = clientX
  state.startY = clientY
}

const handleTouchMove = (e: MouseEvent | TouchEvent, index: number) => {
  if (!state.tracking || state.animation || index !== state.currentPage) return

  let clientX, clientY
  if (e instanceof TouchEvent) {
    e.preventDefault()
    clientX = e.touches[0].clientX
    clientY = e.touches[0].clientY
  } else {
    clientX = e.clientX
    clientY = e.clientY
  }

  // 计算移动距离
  state.posX = clientX - state.startX
  state.posY = clientY - state.startY

  // 根据移动距离调整透明度
  state.opacity = 1 - Math.min(1, Math.abs(state.posX) / 200)
}

const handleTouchEnd = (e: MouseEvent | TouchEvent, index: number) => {
  if (index !== state.currentPage) return

  state.tracking = false
  state.animation = true

  // 添加翻页阈值判断
  if (Math.abs(state.posX) > 100) {
    // 飞出效果
    state.posX = state.posX > 0 ? 500 : -500
    state.opacity = 0
    nextCard()
  } else {
    // 回弹效果
    state.posX = 0
    state.posY = 0
    state.opacity = 1
  }
}

const nextCard = () => {
  setTimeout(() => {
    state.currentPage = (state.currentPage + 1) % props.pages.length
    state.posX = 0
    state.posY = 0
    state.opacity = 1
    state.animation = false
  }, 300)
}

const getCardStyle = (index: number) => {
  // 计算卡片在堆栈中的位置
  const position = index - state.currentPage

  // 当前卡片（最上层）
  if (index === state.currentPage) {
    return {
      transform: `translateX(${state.posX}px) translateY(0) translateX(0) scale(1)`,
      opacity: state.opacity,
      zIndex: 10,
      transition: state.animation ? 'all 0.3s ease' : 'none'
    }
  }

  // 下一张卡片
  if (position === 1) {
    return {
      transform: `translateY(-3px) translateX(5px)`,
      opacity: 0.9,
      zIndex: 9,
      transition: state.animation ? 'all 0.3s ease' : 'none'
    }
  }

  // 第三张卡片
  if (position === 2) {
    return {
      transform: `translateY(-6px) translateX(10px)`,
      opacity: 0.8,
      zIndex: 8,
      transition: state.animation ? 'all 0.3s ease' : 'none'
    }
  }

  // 第四张卡片
  if (position === 3) {
    return {
      transform: `translateY(-9px) translateX(15px) `,
      opacity: 0.7,
      zIndex: 7,
      transition: state.animation ? 'all 0.3s ease' : 'none'
    }
  }

  // 隐藏的卡片
  return {
    zIndex: -1,
    opacity: 0
  }
}

// 暴露给父组件的方法
const prev = () => {
  state.tracking = false
  state.animation = true
  state.posX = -500
  state.opacity = 0
  nextCard()
}

const next = () => {
  state.tracking = false
  state.animation = true
  state.posX = 500
  state.opacity = 0
  nextCard()
}

defineExpose({ prev, next })
</script>


<style scoped>
.card-stack {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}
</style>